<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  
  <body>
    <div id="app">
      <div ref="divContainer" class="div-container"></div>
      
      <!-- v-for中模板引用返回的是数组，数组顺序并不保证与DOM相同 -->
      <div ref="forContainers" v-for="item in 6" :class="`for-container${item}`"></div>
      
      <!-- 动态模板引用 -->
      <div :ref="dynamicContainer" class="dynamic-container"></div>
    </div>
  </body>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <script>
    Vue.createApp({
      computed: {
        dynamicContainer(el) { // el表示元素引用，在每次组件更新时都会调用，元素被卸载时el为null调用一次
          console.log('el', el);
          return 'dynamicContainer';
        }
      },
      beforeMount() {
        console.log('beforeMount', this.$refs.divContainer); // undefined
        console.log('beforeMount', this.$refs.forContainers); // undefined
        console.log('beforeMount', this.$refs.dynamicContainer); // undefined
      },
      mounted() {
        console.log('mounted', this.$refs.divContainer); // <div class="div-container"></div>
        console.log('mounted', this.$refs.forContainers); // [div.for-container1, div.for-container2, div.for-container3, div.for-container4, div.for-container5, div.for-container6]
        console.log('mounted', this.$refs.dynamicContainer); // <div class="dynamic-container"></div>
      },
    }).mount('#app');
  </script>
</html>